<template>
  <el-form-item label="数据绑定字段">
    <el-select
      v-model="optionModel.dataBindField"
      placeholder="请选择"
      @change="emitDefaultValueChange"
    >
      <el-option
        v-for="(item, index) in optionList"
        :key="index"
        :label="item.name"
        :value="item.name"
      >
      <span :style="{textDecoration:item.del == 1?'line-through':''}">{{item.name}}</span>
    </el-option>
    </el-select>
  </el-form-item>
</template>
  
  <script>
import i18n from "@/utils/i18n";
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin";
import { getAllContainerWidgets, getAllFieldWidgets } from "@/utils/util";

export default {
  name: "dataBindField-editor",
  mixins: [i18n, propertyMixin],
  inject: ["getGlobalDsv"],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      optionList: [],
    };
  },
  watch: {
    "designer.widgetList": {
      handler(val) {
        // console.log(this.designer);
        // console.log(getAllFieldWidgets(this.designer.widgetList, false));
        // console.log(getAllContainerWidgets(this.designer.widgetList, false));
        // console.log(this.designer.getFieldWidgetByType());
        this.optionList = []
        let obj = {}
        if(this.getGlobalDsv().dataBindList){
          this.getGlobalDsv().dataBindList.map(item=>{
            this.optionList.push(item.name)
            if(item.del == 1){
              obj[item.name] = 1
            }
          })
        }
        // this.optionList = this.getGlobalDsv().dataBindList
        //   ? this.getGlobalDsv().dataBindList
        //   : [];

        let arrField = getAllFieldWidgets(this.designer.widgetList, false);
        let arrContainer = getAllContainerWidgets(
          this.designer.widgetList,
          false
        );
        let arrExclude = [];
        // let obj = {};
        arrContainer.map((item) => {
          if (item.type == "sub-form") {
            item.container.widgetList.map((item1) => {
              arrExclude.push(item1.id);
            });
          }
        });
        arrField.map((item) => {
          if (!arrExclude.includes(item.name)) {
            this.optionList.push(item.field.options.label)
            // obj[item.name] = {
            //   label: item.field.options.dataBindField
            //     ? item.field.options.dataBindField
            //     : item.field.options.label,
            //   type: item.type,
            // };
          }
        });
        // val.map((item) => {
        //   switch (item.type) {
        //     case "grid":
        //       item.cols.map((item1) => {
        //         if (item1.type == "grid-col") {
        //           item1.widgetList.map((item2) => {
        //             this.optionList.push(item2.options.label);
        //           });
        //         }
        //       });
        //       break;
        //     case "table":
        //       item.rows.map((item1) => {
        //         item1.cols.map((item2) => {
        //           item2.widgetList.map((item3) => {
        //             this.optionList.push(item3.options.label);
        //           });
        //         });
        //       });
        //       break;
        //     case "tab":
        //       item.tabs.map((item1) => {
        //         item1.widgetList.map((item2) => {
        //           this.optionList.push(item2.options.label);
        //         });
        //       });
        //       break;
        //     case "static-text":
        //       break;
        //     default:
        //       this.optionList.push(item.options.label);
        //       break;
        //   }
        // });
        let set = new Set(this.optionList);
        this.optionList = Array.from(set);
        let arr1 = []
        this.optionList.map(item=>{
          if(obj[item]){
            arr1.push({name:item,del:1})
          }else{
            arr1.push({name:item})
          }
        })
        this.optionList = arr1
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    // console.log(this.getGlobalDsv().dataBindList);
    // console.log(this.designer);
  },
};
</script>
  
  <style scoped>
</style>
  